<template>
  <div class="login-container top-box">
    <!-- <div class="top-logo">
      <img src="../assets/images/logo_wh.png" alt="logo" width="87" />
      <span class="desc">试验资源配置与管理系统</span>
    </div> -->
    <div class="content-box">
      <div class="content-left-desc">
        <span class="card-desc">医院识别检测软件</span>
      </div>
      <el-form
        label-position="right"
        label-width="0"
        :model="form"
        ref="ruleForm"
        :rules="rules"
      >
        <div class="login-top">
          <p class="title">请选择登陆权限</p>
          <div class="login-top-content">
            <div class="top-content-item first" :class="{'active':userType === 1 }" @click="onChangeUserType(1)">
              <p>Gueneral User</p>
              <p class="title-desc">普通用户</p>
            </div>
            <div class="top-content-item" :class="{'active':userType == 2 }" @click="onChangeUserType(2)">
              <p>Super Administrator</p>
              <p class="title-desc">超级管理员</p>
            </div>
          </div>
          
        </div>
        <p class="tip">账号/用户名</p>
        <el-form-item prop="loginName">
          <el-input
            v-model.trim="form.loginName"
            clearable
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <p class="tip">密码</p>
        <el-form-item prop="pwd">
          <el-input
            v-model.trim="form.pwd"
            clearable
            prefix-icon="el-icon-s-cooperation"
            type="password"
            placeholder="6-20位字母数字、数字或者英文符号，区分大小写"
          ></el-input>
        </el-form-item>
        <div class="error-info" v-show="errorText">
          <i class="el-icon-warning"></i><span>{{ errorText }}</span>
        </div>
        <div class="login-btn" @click="onClickLoginBtn">登 录</div>
      </el-form>
    </div>
  </div>
</template>
<script>
import md5 from "md5";

export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
        code: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      imgSrc: "",
      errorText: "",
      userType: 1, //区分用户类型
    };
  },
  created() {},
  methods: {
    // 切换用户类型
    onChangeUserType(type) {
      this.userType = type;
    },
    //点击--登录
    onClickLoginBtn() {
            this.$router.push("/myManage");

      /* this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.asyncLogin()
            .then((res) => {
              if (res.data.code === 200) {
                let data = res.data.data;
                localStorage.setItem("userName", data.name);
                localStorage.setItem("authToken", data.token);
                localStorage.setItem("userId", data.userId);
                
                this.asyncGetPowerList();
              } else {
                this.errorText = " " + res.data.msg;
              }
            })
            .catch((error) => {
              if (!error.response) {
                this.errorText = " 网络中断，请检查后重试";
              } else {
                this.errorText = " 登录超时，请重新登录";
              }
            });
        }
      }); */
    },
    //登录
    asyncLogin() {
      let _data = {
        loginName: this.form.name,
        authCode: this.form.code,
        // pwd: this.form.password,
        pwd: md5(this.form.password),
      };

      return new Promise((resolve, reject) => {
        this.$axios({
          method: "post",
          url: "/user/login",
          data: {
            ..._data,
          },
        })
          .then((res) => {
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    //获取菜单权限
    asyncGetPowerList() {
      this.$axios
        .get("/user/getPowerList")
        .then((res) => {
          if (res.data.code === 200) {
            let menuData = res.data.data;
            sessionStorage.setItem("menuList", JSON.stringify(menuData));
            // this.$router.push("/userManage");
            this.$router.push("/myManage");
          } else {
            this.errorText = " " + res.data.msg;
          }
        })
        .catch((error) => {
          this.errorText = " " + error;
        });
    },
  },
};
</script>
<style scoped lang="scss" type="text/scss">
.login-container {
  width: 100%;
  height: 100%;
}

.top-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url("https://img.51miz.com/Element/00/80/83/93/cce1c9f2_E808393_96bfd34e.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/630") no-repeat top center;
  // background: url("../assets/images/login_bg.jpg") no-repeat top center;
  background-size: 100% 100%;
  .content-box {
    display: flex;
    .content-left-desc{
      flex:1;
      width: 400px;
      padding: 40px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      // background: #242F39;
      background-color: rgba(0,0,0,.8);
  // background: url("../assets/images/login_bg.jpg") no-repeat top center;
 
      .card-desc {
        font-size: 20px;
        color:#fff;
        font-weight: bold;
      }
    }
    div.login-top {
      .title {
        font-weight: bold;
        margin-bottom: 10px;
      }
      .login-top-content {
        display:flex;
        justify-content: space-between;
        .top-content-item {
          flex:1;
          height: 60px;
          padding: 11px;
          background-color:#DDDDDD;
          color: #8D8D8D;
          font-size:14px;
          border-radius:3px;
          margin-bottom:16px;
          cursor: pointer;
           &.active{
              background-color:#4867E5;
              color:#A1B1F2;
             .title-desc {
               color:#ffffff;
             }
          }
        }
        .first {
          margin-right:15px;
        }
       
      }

     /*  font-size: 24px;
      font-weight: bold;
      text-align: center;
      margin: 20px 0 40px 0; */
    }
    p.tip {
      padding-bottom: 3px;
      font-size: 14px;
    }
  }
  .el-form {
    width: 400px;
    height: 498px;
    padding: 60px 35px 57px;
    background: #fafafd;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    .el-form-item {
      .icon {
        position: absolute;
        top: 12px;
        left: 13px;
        z-index: 1;
        &.name {
          top: 18px;
        }
      }
    }

    .error-info {
      color: #f0474c;
      margin-bottom: 3px;
      font-size: 14px;
    }

    .login-btn {
      height: 45px;
      line-height: 45px;
      margin-top: 31px;
      text-align: center;
      cursor: pointer;
      color: #fff;
      background: #517ef6;
      font-weight: bold;
      border-radius: 5px;
    }
  }
}
</style>
<style>
.login-container .el-input .el-input__inner {
  /* height: 55px; */
  font-size: 13px;
}

.login-container .el-input .el-input__inner:focus {
  border-color: #59b9e2;
}

.login-container .el-form-item__content .el-form-item__error {
  width: 100%;
  padding-top: 6px;
  color: #f0474c;
  text-align: right;
}

.login-container .el-form-item {
  margin-bottom: 10px;
}
</style>
